<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>position 学习</title>
     <style type="text/css">
     body{
          margin:0px;
     }
       div{
          width: 100px;
          height: 100px;
          margin:0px;
          float: left;
       }

       .rel{
            background-color: #76B610;
            display: inline-block;
            position: absolute;
            top: 50px;
            left: 50px;
       }


       .abs{
          background-color: #C69134;
          display: inline-block;
       }

       .abs1{
          background-color: #CB0909;
          display: inline-block;
          width: 280px;
          height: 280px;
       }

       .outder{
          width: 300px;
          height: 300px;
          background-color: #FFD704;
          display: inline-block;
          position: relative;
       }

       .fixed{
          width: 100px;
          height: 100px;
          background-color: #FFD999;
          position: fixed;
          top: 10px;
          right: 10px;
       }

     </style>
</head>
<body>

<div class="fixed">
    我永远不动 
</div>
     
     <div class="outder">
          
          <div class="rel">
          
          </div>
     </div>

     

     <div class="abs">
          
     </div>

     <div class="abs1">
          一旦设置了absolute，其他div,就会顶对齐。为了不影响，可以设置float：left;
     </div>

</body>
</html>